<template>
  <div class="w-alert" v-if="show" v-on="$attrs" :class="classes">
    <template v-if="type || icon || dismiss">
      <w-icon class="mr2" v-if="type || icon">{{
        type ? typeIcon : icon
        }}</w-icon>
      <div class="w-alert__content">
        <slot>
        </slot>
      </div>
      <w-button class="w-alert__dismiss" v-if="dismiss" @click="
          $emit('update:modelValue', (show = false));
          $emit('input', false);
          $emit('close', false);
        " icon="wi-cross" color="inherit" sm text></w-button>
    </template>
    <slot v-else></slot>
  </div>
</template>

<script>
  import { ref, computed, watch } from "vue";
  export default {
    name: "w-alert",

    props: {
      modelValue: { default: true }, // Show or hide.
      color: { type: String },
      bgColor: { type: String },
      shadow: { type: Boolean },
      tile: { type: Boolean },
      round: { type: Boolean },
      icon: { type: String },
      iconOutside: { type: Boolean },
      plain: { type: Boolean },
      dismiss: { type: Boolean },
      // Types (with icon).
      success: { type: Boolean },
      info: { type: Boolean },
      warning: { type: Boolean },
      error: { type: Boolean },
      // Sizes.
      xs: { type: Boolean },
      sm: { type: Boolean },
      md: { type: Boolean },
      lg: { type: Boolean },
      xl: { type: Boolean },
      // Borders.
      noBorder: { type: Boolean },
      borderLeft: { type: Boolean },
      borderRight: { type: Boolean },
      borderTop: { type: Boolean },
      borderBottom: { type: Boolean },
      outline: { type: Boolean },
      hello: { type: Boolean },
    },

    emits: ["input", "update:modelValue", "close"],

    setup(props, ctx) {
      const show = ref(props.modelValue);

      // color
      const type = computed(() => {
        return (
          (props.success && "success") ||
          (props.info && "info") ||
          (props.warning && "warning") ||
          (props.error && "error") ||
          null
        );
      });

      // icon
      const typeIcon = computed(() => {
        return (
          (type.value === "success" && "wi-check-circle") ||
          (type.value === "warning" && "wi-warning-circle") ||
          (type.value === "error" && "wi-cross-circle") ||
          (type.value === "info" && "wi-info-circle")
        );
      });
      // size
      const presetSize = computed(() => {
        return (
          (props.xs && "xs") ||
          (props.sm && "sm") ||
          (props.md && "md") ||
          (props.lg && "lg") ||
          (props.xl && "xl") ||
          null
        );
      });
      // border
      const hasSingleBorder = computed(() => {
        return (
          props.borderLeft ||
          props.borderRight ||
          props.borderTop ||
          props.borderBottom
        );
      });
      const classes = computed(() => {
        return {
          [`${props.bgColor || (props.plain && type.value)}--bg w-alert--bg`]: props.bgColor || (props.plain && type.value),
          [props.color || (!props.plain && type.value)]: props.color || (!props.plain && type.value),
          [`size--${presetSize.value}`]: presetSize.value,
          [`w-alert--${type.value}`]: type.value,
          "w-alert--has-icon": type.value || props.icon || props.dismiss,
          "w-alert--icon-outside": props.iconOutside,
          "w-alert--plain": type.value && props.plain,
          "w-alert--outline": props.outline,
          "w-alert--tile": props.tile,
          "w-alert--round": props.round,
          "w-alert--no-border": props.noBorder || (props.plain && type.value),
          "w-alert--one-border": props.hasSingleBorder || props.iconOutside,
          "w-alert--border-left":
            (!props.noBorder && props.borderLeft) || props.iconOutside,
          "w-alert--border-right": !props.noBorder && props.borderRight,
          "w-alert--border-top": !props.noBorder && props.borderTop,
          "w-alert--border-bottom": !props.noBorder && props.borderBottom,
          "w-alert--shadow": props.shadow,
        };
      });
      watch(
        () => props.modelValue,
        (value) => {
          show.value = value;
        }
      );
      return {
        show,
        typeIcon,
        type,
        presetSize,
        hasSingleBorder,
        classes,
      };
    },
  };
</script>